<template>
  <div>
    <el-card class="box-card">
      <div class="news_header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="`${item.label}（${item.num}）`" :name="item.name" v-for="item in tabsList" :key="item.label"></el-tab-pane>
        </el-tabs>
        <MainSearchForm ref="detectionFormRef" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
      </div>
      <div class="main_table mg-t-0" style="min-height: 600px">
        <MainTable
          ref="detectionTable"
          :loading="listLoading"
          :columns="columns"
          :tableData="tableData"
        >
          <template v-slot:warn_status="{ row }">
            <span class="status" :style="{ color: row.warn_status ? '#F56C6C' : '#03A98E' }">{{ row.warn_status ? '预警' : '正常' }}</span>
          </template>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <MainLink title="详情" @linkClick="linkClick(scope.row)"></MainLink>
            </template>
          </el-table-column>
        </MainTable>
      </div>
      <div class="pagination-right">
        <MainPagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </MainPagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDetectWarnProject, getDetectWarnList, getDetectWarnTotal } from "@/api/residues/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import MainTable from '@/components/MainTable/table.vue'
import { detectionData } from '../MockData'
const { columns, formList, formValue, tabsList } = detectionData
export default {
  name: "detection",
  components: {
    MainTable
  },
  data() {
    return {
      formList,
      formValue,
      tabsList,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 勾选的数据
      multipleSelection: [],
      listLoading: false,
      columns,
      activeName: 'all'
    };
  },
  activated() {
    this.getData();
    this.getOptions();
  },

  methods: {
    handleClick() {
      if(this.activeName === 'all') {
        if(!this.formList.map(el => el.label).includes('状态')) {
          this.formList.splice(2, 0, { label: '状态', placeholder: '请选择状态', value: 'warn_status', type: 'select', options: [{ label: '正常', value: '0' }, { label: '预警', value: '1' }] })
        }
      }else {
        if(this.formList.map(el => el.label).includes('状态')) {
          const index = this.formList.findIndex(el => el.label === '状态')
          this.formList.splice(index, 1)
          this.formValue.warn_status = ''
        }
      }
      this.formChange()
    },
    //  表单搜索
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getData()
    },
    getOptions() {
      getDetectWarnProject({}).then(res => {
        if(res.errcode == 0) {
          this.formList[3].options = res.data.list.map(el => {
            return {
              label: el.name,
              value: el.id
            }
          })
        }
      })
      getDetectWarnTotal({}).then(res => {
        if(res.errcode == 0) {
          this.tabsList.forEach(el => {
            el.num = res.data[el.key]
          })
        }
      })
    },
    getData() {
      this.listLoading = true;
      let data = {
        page: this.currentPage,
        page_size: this.pageSize,
        ...this.formValue,
        detect_start_date: this.formValue.real_time[0],
        detect_end_date: this.formValue.real_time[1],
        warn_status: this.activeName === 'all' ? this.formValue.warn_status : this.activeName
      };
      delete data.real_time
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data,
      );
      getDetectWarnList(query).then(
        (res) => {
          this.listLoading = false;
          this.tableData = res.data.list;
          this.total = res.data.total;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    linkClick(row) {
      this.$router.push({
        path: '/residues/detection_detail',
        query: {
          id: row.project_id,
          name: row.goods_name,
          good_spu_id: row.good_spu_id,
          real_time: this.formValue.real_time
        }
      })
    }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
